<template>
    <view v-show="!loading" class="function-list">
      <nut-grid :column-num="3" :border="false" square>
        <nut-grid-item v-for="(item, index) in functionListBuilded" :key="index" :text="item.title" @click="handleGo(item)">
          <nut-icon font-class-name="iconfont" class-prefix="icon" :name="item.name" size="40" />
        </nut-grid-item>
      </nut-grid>
    </view>
  </template>
  
  <script>
    export default {
      name: 'park'
    }
  </script>
  <script setup>
  import { reactive, ref } from 'vue'
  import { getPermissions } from '@/utils'
  
  const userInfo = reactive({})
  const role = {
    check: [103, 106, 107, 115],
    task: [101, 102, 110],
    fire: [112],
    patrol: [115],
  }
  const functionList = reactive([
    {
        name: 'yuanquxinxi',
        title: '园区信息',
        auth: ':aqjcGardenInfo',
        path: '/pages/park/list',
        role: [],
        exclude: []
    },{
        name: 'qiyexinxi',
        title: '企业信息',
        auth: ':aqjcGardenInfo',
        path: '/pages/park/enterpriseInfo',
        role: [],
        exclude: []
    },{
        name: 'qiyejiancha',
        title: '企业检查',
        auth: ':aqjcGardenInfo',
        path: '/pages/park/inspect',
        role: [],
        exclude: []
    }
  ])
  const functionListBuilded = ref([])
  const buildFunctionList = (list, userRoleIds, deptId) => {
    try {
      // return list.filter(item => (userRoleIds.some(id => item.role.includes(id)) && !item.exclude.includes(deptId))) || []
      // console.log('list.filter(item => getPermissions(item.auth))', list.filter(item => getPermissions(item.auth)))
      return list.filter(item => getPermissions(item.auth)) || []
    } catch (e) {
      return []
    }
  }
  functionListBuilded.value = buildFunctionList(functionList)
  console.log(functionListBuilded)
  const handleGo = (item) => {
    if ([].includes(item.name)) {
      uni.showToast({
        title: '功能开发中！',
        icon: 'error'
      })
      return
    }
    uni.navigateTo({
      url: item.path
    })
  }
 
  
  
  </script>
  <style scoped>
  .function-list{padding: 20px 0 0;}
  .no-content{padding: 20px 20px;text-align: center;}
  .no-content .h2{color: #ff0000;font-size: 24px;font-weight: bold;margin: 0 0 20px;}
  .no-content .p{margin: 0 0 10px;}
  </style>
  <style lang="scss">
  .function-list .nut-grid-item__text{padding: 10px 0 0;}
  </style>
  